<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>题库</title>
    <link rel="stylesheet" href="css/conmmon.css">
    <link rel="stylesheet" href="css/topic_list.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/commom.js"></script>
    
</head>

<body>
    <!-- 导航栏 -->
    <div class="nav">
      <span class="nav_left">
          <img src="img/logo.jpg" alt="">
      </span>
      <span class="nav_right">
        <a href="/myblog_list.html">个人博客列表页</a>
        <a href="/blog_add.html">写博客</a>
        <a href="/mydraft_list.html">草稿箱</a>
        <a href="/login.html">登陆</a>
        <a href="javascript:logout()">注销</a>
      </span>  
  </div>
  <!-- 提示框 -->
  <div id="pr">

  </div>
    <!-- 版心 -->
    <div class="container-list">

      <div class="topic-list">
        <!-- <span class="select-level">
        <select>
          <option value="难度">难度</option>
          <option value="入门">入门</option>
          <option value="简单">简单</option>
          <option value="中等">中等</option>
          <option value="较难">较难</option>
          <option value="困难">困难</option>
        </select>
      </span> -->

        <table>
            <thead>
              <tr>
                <!-- <th></th> -->
                <th>序号</th>
                <th style="width: 530px;">题目</th>
                <th>等级</th>
                <th>思路</th>
                <th>通过率</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>
                  <div>
                    对钩
                  </div>
                </td>
                <td>1</td>
                <td>翻转链表</td>
                <td>简单</td>
                <td>思路</td>
                <td>55.32%</td>
              </tr>
              <tr>
                <th></th>
                <td>2</td>
                <td>回文字符串</td>
                <td>简单</td>
                <td>思路</td>
                <td>52.46%</td>
              </tr>
              <tr>
                <th></th>
                <td>3</td>
                <td>两数之和</td>
                <td>简单</td>
                <td>思路</td>
                <td>45.45%</td>
              </tr>
            </tbody>
        </table>
      </div>
      <div class="list-down">
        <div class="data-count">
          <span>共100条</span>
          <span class="select-data">
            <select>
              <option value="5">5条/页</option>
              <option value="10">10条/页</option>
              <option value="20">20条/页</option>
              <option value="100">100条/页</option>
            </select>
          </span>
        </div>
        <div class="blog-pagnation-wrapper">
          <button onclick="goFirstPage()" class="blog-pagnation-item">&lt;&lt;</button> 
          <button onclick="goBeforePage()" class="blog-pagnation-item">&lt;</button>  
          <button onclick="goNextPage()" class="blog-pagnation-item">&gt;</button>
          <button onclick="goLastPage()" class="blog-pagnation-item">&gt;&gt;</button>
      </div>
      </div>
      
    </div>
    <!-- 尾部 -->
    <div class="footer">
      <div class="foot-up">
        <div>关于我们</div>
        <div>加入我们</div>
        <div>意见反馈</div>
        <div>免责声明</div>
        <div>联系我们</div>
      </div>
      <div class="foot-down">
        Imitated from cow guest network
      </div>
    </div>
    <script>
        // 获取题目列表
        //当前页码
        var index = 1;
        //当前可显示的最大条数
        var Msize = jQuery(".select-data option:selected");
        console.log(Msize.val());
        //当前最大页码数
        var pcount = 1;
        //尝试获取url中当前页码数
        index = (getUrlValue("index")==""?1:getUrlValue(index));
        //交互开始获取题目
        function initListPage() {
          jQuery.ajax({
            url:"/topic/topicList",
            type:"POST",
            data:{"index":index,"size":Msize.val()},
            success:function(result) {
              if(result != null && result.code == 200 && result.data.list.length > 0) {
                var listhtml = "";
                for(var i = 0;i<result.data.list.length;i++) {
                  var topicData = result.data.list[i];
                  listhtml += '<tr>';
                  listhtml += '<td>'+topicData.id+'</td>'; 
                  listhtml += '<td>'+topicData.title+'</td>'; 
                  listhtml += '<td>'+topicData.level+'</td>'; 
                  listhtml += '<td>'+'<a href="/topic_detail.html?id=' + topicData.id + '>思路</a>'+'</td>'; 
                  listhtml += '<td>'+topicData.passRate+'</td>'; 
                  listhtml += '</tr>';
                }
                jQuery("tbody").html(listhtml);
                pcount = result.data.pcount;
              }
            }
          });
        }
        initListPage();
        
        //跳转页数
        function goFirstPage() {
          if(index <= 1) {
            alert("当前已经在首页了");
            return;
          }
          location.href="topic_list.html";
        }
        function goBeforePage() {
          if(index <= 1) {
            alert("当前已经在首页了");
            return;
          }
          index--;
          location.herf="topic_list.html?index="+index;
        }
        function goNextPage() {
          if(index >= pcount) {
            alert("当前已经在末页了");
            return;
          }
          index++;
          location.herf="topic_list.html?index="+index;
        }
        function goLastPage() {
          if(index >= pcount) {
            alert("当前已经在末页了");
            return;
          }
          location.herf="topic_list.html?index="+pcount;
        }

    </script>
</body>
</html>